2. september 2025Eesti

Avastage Reacti eksperimentaalne experimental_useFormStatus hook sujuvamaks vormi oleku haldamiseks. Õppige selle rakendamist, eeliseid ja täpsemaid kasutusviise.

Reacti experimental_useFormStatus'i rakendamine: täiustatud vormi oleku haldamine

Reacti pidevalt arenev maastik tutvustab pidevalt tööriistu ja tehnikaid, et parandada arendajakogemust ja rakenduste jõudlust. Üks selline eksperimentaalne funktsioon on experimental_useFormStatus hook, mis on loodud vormi oleku haldamise lihtsustamiseks, eriti serveri tegevuste ja progressiivse täiustamise stsenaariumide puhul. See põhjalik juhend uurib experimental_useFormStatus hooki detailselt, pakkudes praktilisi näiteid ja teadmisi selle tõhusaks kasutamiseks.

Mis on `experimental_useFormStatus`?

experimental_useFormStatus hook on Reacti meeskonna poolt kasutusele võetud eksperimentaalne API, et pakkuda lihtsamat viisi vormi esitamise oleku jälgimiseks, eriti serveri tegevuste kasutamisel. Enne seda hooki nõudis vormi erinevate olekute (ootel, esitamine, edukas, viga) haldamine sageli keerukat olekuhaldusloogikat. experimental_useFormStatus eesmärk on suur osa sellest keerukusest abstraheerida, pakkudes lihtsat ja tõhusat viisi vormi esitamise olekute jälgimiseks ja neile reageerimiseks.

Põhilised eelised:

Lihtsustatud olekuhaldus: Vähendab vormi esitamise olekute haldamiseks vajalikku koodimalli.
Parem kasutajakogemus: Võimaldab reageerivamaid kasutajaliidese uuendusi vastavalt vormi olekule.
Parem koodi loetavus: Muudab vormiga seotud koodi lihtsamini mõistetavaks ja hooldatavaks.
Sujuv integreerimine serveri tegevustega: Loodud töötama eriti hästi Reacti serveri komponentide ja serveri tegevustega.

Põhiline rakendamine

experimental_useFormStatus'i põhirakenduse illustreerimiseks vaatleme lihtsat kontaktivormi näidet. See vorm kogub kasutaja nime, e-posti ja sõnumi ning esitab selle seejärel serveri tegevuse abil.

Eeltingimused

Enne koodi süvenemist veenduge, et teil on seadistatud Reacti projekt järgmisega:

Reacti versioon, mis toetab eksperimentaalseid API-sid (vajaliku versiooni kohta vaadake Reacti dokumentatsiooni).
Reacti serveri komponendid on lubatud (tavaliselt kasutatakse raamistikes nagu Next.js või Remix).

Näide: lihtne kontaktivorm

Siin on lihtne kontaktivormi komponent:

```jsx // app/actions.js (Serveri tegevus) 'use server' export async function submitContactForm(formData) { // Simuleerib andmebaasi kutset või API päringut await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'Kõik väljad on kohustuslikud.' }; } try { // Asendage tegeliku API kutse või andmebaasi operatsiooniga console.log('Vorm esitatud:', { name, email, message }); return { success: true, message: 'Vorm edukalt esitatud!' }; } catch (error) { console.error('Vormi esitamisel tekkis viga:', error); return { success: false, message: 'Vormi esitamine ebaõnnestus.' }; } } // app/components/ContactForm.jsx (Kliendi komponent) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

Nimi:

E-post:

Sõnum:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>Selgitus</h3>

<ul>
  <li><b>Serveri tegevus (<code>app/actions.js</code>):</b> See fail defineerib <code>submitContactForm</code> funktsiooni, mis on serveri tegevus. See simuleerib API päringut 2-sekundilise viivitusega, et demonstreerida vormi esitamise asünkroonset olemust. Samuti tegeleb see põhilise valideerimise ja veakäsitlusega.</li>
  <li><b>Kliendi komponent (<code>app/components/ContactForm.jsx</code>):</b> See fail defineerib <code>ContactForm</code> komponendi, mis on kliendi komponent. See impordib <code>experimental_useFormStatus</code> hooki ja <code>submitContactForm</code> tegevuse.</li>
  <li><b><code>useFormStatus</code>'i kasutus:</b> <code>SubmitButton</code> komponendi sees kutsutakse välja <code>useFormStatus</code>. See hook annab teavet vormi esitamise oleku kohta.</li>
  <li><b><code>pending</code> omadus:</b> <code>useFormStatus</code>'i tagastatud <code>pending</code> omadus näitab, kas vormi esitatakse hetkel. Seda kasutatakse esitamisnupu keelamiseks ja teate „Esitan...” kuvamiseks.</li>
  <li><b>Vormi sidumine:</b> <code>form</code> elemendi <code>action</code> prop on seotud <code>submitContactForm</code> serveri tegevusega. See ütleb Reactile, et vormi esitamisel tuleb käivitada serveri tegevus.</li>
</ul>

<h2>Edasijõudnud kasutus ja kaalutlused</h2>

<h3>Eduka ja veaoleku käsitlemine</h3>

<p>Kuigi <code>experimental_useFormStatus</code> lihtsustab esitamise oleku jälgimist, peate sageli edukuse ja veaolekuid eraldi käsitlema. Serveri tegevused võivad tagastada andmeid, mis näitavad edu või ebaõnnestumist, mida saate seejärel kasutada kasutajaliidese vastavaks värskendamiseks.</p>

<p><b>Näide:</b></p>

```jsx
// app/components/ContactForm.jsx (Muudetud)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Esitan...' : 'Esita'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Nimi:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">E-post:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">Sõnum:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selgitus:</b></p>

<ul>
  <li><b>Olek teadete jaoks:</b> <code>message</code> olekumuutuja on kasutusele võetud serveri tegevuse tagastatud tulemuse salvestamiseks.</li>
  <li><b>Tulemuse käsitlemine:</b> Pärast vormi esitamist uuendab <code>handleSubmit</code> funktsioon <code>message</code> olekut serveri tegevuse tulemusega.</li>
  <li><b>Teadete kuvamine:</b> Komponent kuvab teate vastavalt tulemuse <code>success</code> omadusele, rakendades eduka ja veaoleku jaoks erinevaid CSS-klasse.</li>
</ul>

<h3>Progressiivne täiustamine</h3>

<p><code>experimental_useFormStatus</code> särab progressiivse täiustamise stsenaariumides. Standardset HTML-vormi Reactiga progressiivselt täiustades saate pakkuda paremat kasutajakogemust, ohverdamata põhifunktsionaalsust, kui JavaScript ebaõnnestub.</p>

<p><b>Näide:</b></p>

<p>Alustades lihtsast HTML-vormist:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">Nimi:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">E-post:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">Sõnum:</label>
    <textarea id="message" name="message" required>

```

Seejärel saate seda Reacti ja experimental_useFormStatus'iga progressiivselt täiustada.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // Kasutage nulli algolekuna, kui te sellele ei tugine return (

Nimi:

E-post:

Sõnum:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>Selgitus:</b></p>

<ul>
  <li><b>Algne HTML-vorm:</b> Fail <code>public/contact.html</code> sisaldab standardset HTML-vormi, mis töötab ka ilma JavaScriptita.</li>
  <li><b>Progressiivne täiustamine:</b> <code>EnhancedContactForm</code> komponent täiustab HTML-vormi progressiivselt. Kui JavaScript on lubatud, võtab React juhtimise üle ja pakub rikkalikumat kasutajakogemust.</li>
  <li><b><code>useFormState</code> hook:</b> Kasutab <code>useFormState</code>'i vormi oleku haldamiseks ja serveri tegevuse vormiga sidumiseks.</li>
	<li> <b><code>state</code>:</b> <code>useFormState</code>'ist pärinev <code>state</code> sisaldab nüüd serveri tegevuse tagastusväärtust, mida saab kontrollida edu- või veateadete osas.</li>
</ul>

<h3>Rahvusvahelised kaalutlused</h3>

<p>Globaalsele sihtrühmale vormide rakendamisel tulevad mängu mitmed rahvusvahelised kaalutlused:</p>

<ul>
  <li><b>Lokaliseerimine:</b> Veenduge, et teie vormi sildid, teated ja veateated on lokaliseeritud erinevatesse keeltesse. Tööriistad nagu i18next aitavad tõlkeid hallata.</li>
  <li><b>Kuupäeva- ja numbrivormingud:</b> Käsitlege kuupäeva- ja numbrivorminguid vastavalt kasutaja lokaadile. Kasutage kuupäevade ja numbrite korrektseks vormindamiseks teeke nagu <code>Intl</code> või <code>moment.js</code> (kuupäevade vormindamiseks, kuigi seda peetakse nüüd pärandiks).</li>
  <li><b>Aadressivormingud:</b> Erinevates riikides on erinevad aadressivormingud. Kaaluge teegi kasutamist, mis toetab mitut aadressivormingut, või looge kohandatud vormiväljad vastavalt kasutaja asukohale.</li>
  <li><b>Telefoninumbri valideerimine:</b> Valideerige telefoninumbreid vastavalt rahvusvahelistele standarditele. Teegid nagu <code>libphonenumber-js</code> võivad sellega aidata.</li>
  <li><b>Paremalt-vasakule (RTL) tugi:</b> Veenduge, et teie vormi paigutus toetab RTL-keeli nagu araabia või heebrea keel. Kasutage parema RTL-toe saavutamiseks CSS-i loogilisi omadusi (nt <code>margin-inline-start</code> asemel <code>margin-left</code>).</li>
  <li><b>Juurdepääsetavus:</b> Järgige juurdepääsetavuse juhiseid (WCAG), et tagada teie vormide kasutatavus puuetega inimestele, olenemata nende asukohast.</li>
</ul>

<p><b>Näide: lokaliseeritud vormi sildid</b></p>

```jsx
// i18n/locales/et.json
{
  "contactForm": {
    "nameLabel": "Nimi",
    "emailLabel": "E-post",
    "messageLabel": "Sõnum",
    "submitButton": "Esita",
    "successMessage": "Vorm edukalt esitatud!",
    "errorMessage": "Vormi esitamine ebaõnnestus."
  }
}

// i18n/locales/fr.json
{
  "contactForm": {
    "nameLabel": "Nom",
    "emailLabel": "Courriel",
    "messageLabel": "Message",
    "submitButton": "Soumettre",
    "successMessage": "Formulaire soumis avec succès !",
    "errorMessage": "Échec de la soumission du formulaire."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selgitus:</b></p>

<ul>
  <li><b>Tõlkefailid:</b> Näide kasutab <code>react-i18next</code>'i tõlgete haldamiseks. Eraldi JSON-failid sisaldavad tõlkeid erinevate keelte jaoks.</li>
  <li><b><code>useTranslation</code> hook:</b> <code>useTranslation</code> hook annab juurdepääsu tõlkefunktsioonile (<code>t</code>), mida kasutatakse lokaliseeritud stringide hankimiseks.</li>
  <li><b>Lokaliseeritud sildid:</b> Vormi sildid ja nupu tekst hangitakse <code>t</code> funktsiooni abil, tagades nende kuvamise kasutaja eelistatud keeles.</li>
</ul>

<h3>Juurdepääsetavuse kaalutlused</h3>

<p>On ülioluline tagada, et teie vormid oleksid juurdepääsetavad kõigile kasutajatele, sealhulgas puuetega inimestele. Siin on mõned peamised juurdepääsetavuse kaalutlused:</p>

<ul>
  <li><b>Semantiline HTML:</b> Kasutage semantilisi HTML-elemente nagu <code><label></code>, <code><input></code>, <code><textarea></code> ja <code><button></code> korrektselt.</li>
  <li><b>Sildid:</b> Seostage sildid vormi kontrollidega, kasutades <code>for</code> atribuuti <code><label></code>'il ja <code>id</code> atribuuti vormi kontrollil.</li>
  <li><b>ARIA atribuudid:</b> Kasutage ARIA atribuute, et pakkuda lisateavet abitehnoloogiatele. Näiteks kasutage <code>aria-describedby</code>, et siduda vormi kontroll kirjeldusväljaga.</li>
  <li><b>Veakäsitlus:</b> Märkige vead selgelt ja pakkuge abistavaid veateateid. Kasutage ARIA atribuute nagu <code>aria-invalid</code>, et märkida kehtetuid vormi kontrolle.</li>
  <li><b>Klaviatuuriga navigeerimine:</b> Veenduge, et kasutajad saaksid vormis navigeerida klaviatuuri abil. Kasutage <code>tabindex</code> atribuuti fookuse järjekorra kontrollimiseks, kui see on vajalik.</li>
  <li><b>Värvikontrastsus:</b> Tagage piisav värvikontrastsus teksti ja taustavärvide vahel.</li>
  <li><b>Vormi struktuur:</b> Kasutage selget ja järjepidevat vormi struktuuri. Grupeerige seotud vormi kontrollid, kasutades <code><fieldset></code> ja <code><legend></code> elemente.</li>
</ul>

<p><b>Näide: juurdepääsetav veakäsitlus</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'Esitan...' : 'Esita'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // Põhiline kliendipoolne valideerimine
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'Nimi on kohustuslik.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'E-post on kohustuslik.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'Sõnum on kohustuslik.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // Kustuta eelmised vead
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">Nimi:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">E-post:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">Sõnum:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>Selgitus:</b></p>

<ul>
  <li><b>Veaolek:</b> Komponent hoiab <code>errors</code> olekut valideerimisvigade jälgimiseks.</li>
  <li><b>Kliendipoolne valideerimine:</b> <code>handleSubmit</code> funktsioon teostab enne vormi esitamist põhilise kliendipoolse valideerimise.</li>
  <li><b>ARIA atribuudid:</b> <code>aria-invalid</code> atribuut seatakse väärtusele <code>true</code>, kui konkreetse vormi kontrolli puhul esineb viga. <code>aria-describedby</code> atribuut seob vormi kontrolli veateatega.</li>
  <li><b>Veateated:</b> Veateated kuvatakse vastavate vormi kontrollide kõrval.</li>
</ul>

<h2>Võimalikud väljakutsed ja piirangud</h2>

<ul>
  <li><b>Eksperimentaalne staatus:</b> Olles eksperimentaalne API, võib <code>experimental_useFormStatus</code> tulevastes Reacti versioonides muutuda või eemaldada. On oluline olla kursis Reacti dokumentatsiooniga ja valmis oma koodi vajadusel kohandama.</li>
  <li><b>Piiratud ulatus:</b> Hook keskendub peamiselt esitamise oleku jälgimisele ega paku laiaulatuslikke vormihaldusfunktsioone nagu valideerimine või andmekäsitlus. Nende aspektide jaoks peate võib-olla siiski rakendama täiendavat loogikat.</li>
  <li><b>Sõltuvus serveri tegevusest:</b> Hook on loodud töötama serveri tegevustega, mis ei pruugi sobida kõigi kasutusjuhtude jaoks. Kui te ei kasuta serveri tegevusi, peate võib-olla leidma alternatiivseid lahendusi vormi oleku haldamiseks.</li>
</ul>

<h2>Kokkuvõte</h2>

<p><code>experimental_useFormStatus</code> hook pakub märkimisväärset edasiminekut vormi esitamise olekute haldamisel Reactis, eriti serveri tegevuste ja progressiivse täiustamisega töötamisel. Lihtsustades olekuhaldust ja pakkudes selget ning lühikest API-d, parandab see nii arendaja- kui ka kasutajakogemust. Arvestades selle eksperimentaalset olemust, on siiski ülioluline olla kursis uuenduste ja võimalike muudatustega tulevastes Reacti versioonides. Mõistes selle eeliseid, piiranguid ja parimaid tavasid, saate tõhusalt kasutada <code>experimental_useFormStatus</code>'i, et ehitada oma Reacti rakendustesse robustsemaid ja kasutajasõbralikumaid vorme. Pidage meeles arvestada rahvusvahelistumise ja juurdepääsetavuse parimate tavadega, et luua kaasavaid vorme globaalsele sihtrühmale.</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">React</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi olek</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Reacti vormid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">eksperimentaalne API</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">Reacti hook'id</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">vormi esitamine</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">asünkroonsed vormid</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">progressiivne täiustamine</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template></div><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="Reacti experimental_useFormStatus'i rakendamine: täiustatud vormi oleku haldamine"/><meta property="og:description" content="Avastage Reacti eksperimentaalne experimental_useFormStatus hook sujuvamaks vormi oleku haldamiseks. Õppige selle rakendamist, eeliseid ja täpsemaid kasutusviise."/><meta property="og:url" content="https://mlog.uz/et/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="et"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.843Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.843Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="React"/><meta property="article:tag" content="useFormStatus"/><meta property="article:tag" content="vormi olek"/><meta property="article:tag" content="Reacti vormid"/><meta property="article:tag" content="eksperimentaalne API"/><meta property="article:tag" content="Reacti hook'id"/><meta property="article:tag" content="vormi esitamine"/><meta property="article:tag" content="asünkroonsed vormid"/><meta property="article:tag" content="progressiivne täiustamine"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="Reacti experimental_useFormStatus'i rakendamine: täiustatud vormi oleku haldamine"/><meta name="twitter:description" content="Avastage Reacti eksperimentaalne experimental_useFormStatus hook sujuvamaks vormi oleku haldamiseks. Õppige selle rakendamist, eeliseid ja täpsemaid kasutusviise."/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><script>$RC("B:0","S:0")</script></body></html>

Reacti experimental_useFormStatus'i rakendamine: täiustatud vormi oleku haldamine

Mis on experimental_useFormStatus?

Põhiline rakendamine

Eeltingimused

Näide: lihtne kontaktivorm

Mis on `experimental_useFormStatus`?